<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TY Player</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <link href="static/css/video-js.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="static/css/index.css">

    
</head>

<body>

    <div class="main" id="main">
        <div class="left">
            <span class="ty-svg active" id="view" data-tab="view">
                <img src="static/images/光圈-紫.png">
            </span>
            <span class="ty-svg" id="player" data-tab="player">
                <img src="static/images/播放.png">
            </span>
            <span class="ty-svg" id="collect" data-tab="collect">
                <img src="static/images/收藏.png">
            </span>
        </div>
        <div class="right">
            
            <div class="ui table tab active" data-tab="view">
                <!-- 顶部筛选 -->
                <div id="top" class="top">
                    <div id="station-select" class="ui selection dropdown">
                        <i class="dropdown icon"></i>
                        <div id="station-dropdown-selected" class="default text">最大资源网</div>
                        <div class="menu">
                            <div id="zdzy" class="item" data-value="0">最大资源网</div>
                            <div id="okzy" class="item" data-value="1">OK资源网</div>
                            <!-- <div id="sbzy" class="item" data-value="2">速播资源站</div> -->
                            <div id="123zy" class="item" data-value="3">123资源站</div>
                        </div>
                    </div>
                    <!-- 分类筛选 -->
                    <div id="type-fulter" class="ui selection dropdown">
                        <i class="dropdown icon"></i>
                        <div class="default text">最新</div>
                        <div class="menu">
                            <div id="newest" class="item" data-value="0">最新</div>
                            <div id="tv" class="item" data-value="1">电视剧</div>
                            <div id="movie" class="item" data-value="2">电影</div>
                            <div id="animation" class="item" data-value="3">动漫</div>
                        </div>
                    </div>
                    <!-- 子分类筛选 -->
                    <div id="sub-fulter" class="ui selection dropdown disabled">
                        <i class="dropdown icon"></i>
                        <div id="dt" class="default text">国产剧</div>
                        <div class="menu">
                            <div id="dv0" class="item" data-value="0">国产剧</div>
                            <div id="dv1" class="item" data-value="1">香港剧</div>
                            <div id="dv2" class="item" data-value="2">韩国剧</div>
                            <div id="dv3" class="item" data-value="3">台湾剧</div>
                            <div id="dv4" class="item" data-value="4">日本剧</div>
                        </div>
                    </div>
                    <!-- 搜索 -->
                    <div id="search" class="ui search">
                        <div class="ui icon input">
                            <input id="search-text" class="prompt" type="text" placeholder="请输入关键字">
                            <i class="search icon" style="cursor: pointer !important;"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </div>

                <!-- 绑定vue -->
                <div id="vue-dom">
                    
                    <!-- 表格 -->
                    <div class="video-list-table">
                        <table class="ui blue table" id="video-list">
                            <thead>
                                <tr>
                                    <th>视频名称</th>
                                    <th>类型</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="video in videoList">
                                    <td>{{video.name}}</td>
                                    <td>{{video.type}}</td>
                                    <td>{{video.updateTime}}</td>
                                    <td>
                                        <a @click.prevent="detailClick(video.link)" :href="video.link">详情</a>
                                        <a href="" @click.prevent="addCollcet(video)" style="padding: 0 5px;color: MediumSlateBlue;">收藏</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


                    <!-- 分页 -->
                    <div class="ui borderless pagination menu" style="width: 100%;height: 25px;min-height: 20px;border-width: 0.5px;">
                        <span style="padding: 0 10px;line-height: 28px;">共{{sumNum}}条</span>
                        <a id="previous" class="item"  v-on:click.prevent="previous()">
                            <i class="left blue arrow icon" ></i>
                        </a>

                        <a class="item" v-for="i in 6" :href="resourceStation + turnPageStr + i + '.html'"  @click.prevent="turnPageGetData((resourceStation + turnPageStr + i + '.html'))">{{i}}</a>
                        <!-- <a class="item">2</a> -->
                        <a id="next" class="item"  v-on:click.prevent="next()">
                            <i class="right blue arrow icon" ></i>
                        </a>
                    </div>

                    <!-- 详情 -->
                    <div class="detail" v-if="isShow">
                        <div style="padding-left: 60px;width: 95%;">
                            <div class="detail-header">
                                <span>详情</span>
                                <span><i id="detail-close" @click="detailClose()" class="ui red close icon" style="cursor: pointer;margin: 0;"></i></span>
                            </div>
    
                            <div class="detail-body" style="height: 650;overflow: auto;">
                                
                                <div v-html="videoSummary" style="border: 1px solid;border-color: rgba(130, 58, 160, 0.13);border-radius: 2px;min-height: 360px;">
                                    <!-- {{videoSummary}} -->
                                </div>
                                <div class="detail-playlist" style="border: 1px solid;border-color: rgba(130, 58, 160, 0.13);border-radius: 2px;padding: 10px 5px;">
                                    <span style="padding-left: 10px;">播放</span>
                                    <div style="padding: 5px;">
                                        <a class="ui blue basic label"  v-for="play in videoPlayList" :href="play.address"  @click.prevent="playVideo(play.address,play.episode)" style="margin: 5px;">{{play.episode}}</a>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    
                    
                </div>

            </div>

            <!-- 播放器 -->
            <div class="ui player tab" data-tab="player" style="height: 95%;margin:5px auto;">
                <div style="height: 100%;">
                    <h4 id="play-tiltle" style="display: inline;margin: 0;padding: 10px 0;color: mediumpurple;">『第一集』</h4>
                    <span style="float: right;padding: 0 5px;">详情<i id="show-detail" class="ui blue angle double up icon" style="cursor: pointer;"></i></span>
                    <section id="videoPlayer" style="height:96%;margin: 10px auto;">
                        <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload style="width:100%;height: 100%;">
                            <source src=""  type="application/x-mpegURL" id="source-target">
                            <!-- <source src="" type="application/x-mpegURL" id="source-target"> -->
                        </video>
                    </section>  
                </div>
                
            </div>

            <!-- 收藏 -->
            <div class="ui collect tab" data-tab="collect">
                <div id="vue-collect" style="margin: 15px auto;">
                    <table class="ui blue table" id="collect-list">
                        <thead>
                            <tr>
                                <th>视频名称</th>
                                <th>类型</th>
                                <th>站点</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="vdo in videoCollect">
                                <td>{{vdo[0]}}</td>
                                <td>{{vdo[1]}}</td>
                                <td>{{vdo[2]}}</td>
                                <td>
                                    <a @click.prevent="collectDetail(vdo[3])" :href="vdo[3]">详情</a>
                                    <a href="" @click.prevent="deleteCollect(vdo,this)" style="padding: 0 5px;color: red;">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
            </div>


        </div>
    </div>



    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <script src="static/js/video.min.js"></script>
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/left-envt.js"></script>
    
    <script>
        
        //站点筛选
        $("#station-select").dropdown({
            action:'activate',
            onChange: function(value, text) {
                console.log(text);
                switch (text) {

                    case "最大资源网":
                        $("#type-fulter").dropdown('clear');
                        vm.resourceStation = "http://zuidazy4.com";
                        vm.videoList = vm.getIndexData(vm.resourceStation);
                        break;
                    case "OK资源网":
                        $("#type-fulter").dropdown('clear');
                        vm.resourceStation = "http://okzyw.com";
                        vm.videoList = vm.getIndexData(vm.resourceStation);
                        break;
                    // case "速播资源站":
                    //     vm.resourceStation = "http://www.subo988.com";
                    //     vm.videoList = vm.getIndexData(vm.resourceStation);
                    //     break;
                    case "123资源站":
                        $("#type-fulter").dropdown('clear');
                        vm.resourceStation = "http://www.123ku.com";
                        vm.videoList = vm.getIndexData(vm.resourceStation);
                        break;
                    default:
                        break;
                }
            }
        });

        //分类筛选
        $("#type-fulter").dropdown({
            action:'activate',
            onChange: function(value, text) {
                console.log(text);
                switch (text) {
                    case "最新":
                        vm.videoList = vm.getIndexData(vm.resourceStation);
                        if ($("#sub-fulter").hasClass("disabled") == false) {
                            $("#sub-fulter").addClass("disabled");
                        }
                        break;
                    case "电视剧":
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-2.html");    //电视剧主页
                        vm.turnPageStr = "/?m=vod-type-id-2-pg-";
                        $("#sub-fulter").removeClass("disabled");   //解除子类筛选禁用
                        $("#sub-fulter #dt").text("国产剧");
                        $("#sub-fulter #dv0").text("国产剧");
                        $("#sub-fulter #dv1").text("香港剧");
                        $("#sub-fulter #dv2").text("韩国剧");
                        $("#sub-fulter #dv3").text("台湾剧");
                        $("#sub-fulter #dv4").text("日本剧");
                        break;
                    case "电影":
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-1.html");
                        vm.turnPageStr = "/?m=vod-type-id-1-pg-";
                        $("#sub-fulter").removeClass("disabled");   //解除子类筛选禁用
                        $("#sub-fulter #dt").text("动作片");
                        $("#sub-fulter #dv0").text("动作片");
                        $("#sub-fulter #dv1").text("喜剧片");
                        $("#sub-fulter #dv2").text("科幻片");
                        $("#sub-fulter #dv3").text("恐怖片");
                        $("#sub-fulter #dv4").text("剧情片");
                        
                        break;
                    case "动漫":
                        if ($("#sub-fulter").hasClass("disabled") == false) {
                            $("#sub-fulter").addClass("disabled");
                        }
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-4.html");
                        vm.turnPageStr = "/?m=vod-type-id-4-pg-";
                        break;
                    default:
                        break;
                }
                
            }
        });

        //子分类筛选
        $("#sub-fulter").dropdown({
            action:'activate',
            onChange: function(value, text) {
                switch (text) {
                    case "国产剧":
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-12.html");
                        vm.turnPageStr = "/?m=vod-type-id-12-pg-";
                        break;
                    case "香港剧":
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-13.html");
                        vm.turnPageStr = "/?m=vod-type-id-13-pg-";
                        break;
                    case "韩国剧":
                        vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-14.html");
                        vm.turnPageStr = "/?m=vod-type-id-14-pg-";
                        break;
                    case "台湾剧":
                        switch (vm.resourceStation) {
                            case "http://zuidazy4.com":     //最大资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-19.html");
                                vm.turnPageStr = "/?m=vod-type-id-19-pg-";
                                break;
                            case "http://okzyw.com":    //ok资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-16.html");
                                vm.turnPageStr = "/?m=vod-type-id-16-pg-";
                                break;
                            case "http://www.123ku.com":    //123资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-18.html");
                                vm.turnPageStr = "/?m=vod-type-id-18-pg-";
                                break;
                            default:
                                break;
                        }
                        break;
                    case "日本剧":
                        switch (vm.resourceStation) {
                            case "http://zuidazy4.com":     //最大资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-20.html");
                                vm.turnPageStr = "/?m=vod-type-id-20-pg-";
                                break;
                            case "http://okzyw.com":    //ok资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-17.html");
                                vm.turnPageStr = "/?m=vod-type-id-17-pg-";
                                break;
                            case "http://www.123ku.com":    //123资源网
                                vm.videoList = vm.getIndexData(vm.resourceStation+"/?m=vod-type-id-19.html");
                                vm.turnPageStr = "/?m=vod-type-id-19-pg-";
                                break;
                            default:
                                break;
                        }
                        break;
                    case "动作片":
                        vm.videoList = vm.getIndexData(vm.resourceStation + "/?m=vod-type-id-5.html");
                        vm.turnPageStr = "/?m=vod-type-id-5-pg-";
                        break;
                    case "喜剧片":
                        vm.videoList = vm.getIndexData(vm.resourceStation + "/?m=vod-type-id-6.html");
                        vm.turnPageStr = "/?m=vod-type-id-6-pg-";
                        break;
                    case "科幻片":
                        vm.videoList = vm.getIndexData(vm.resourceStation + "/?m=vod-type-id-8.html");
                        vm.turnPageStr = "/?m=vod-type-id-8-pg-";
                        break;
                    case "恐怖片":
                        vm.videoList = vm.getIndexData(vm.resourceStation + "/?m=vod-type-id-9.html");
                        vm.turnPageStr = "/?m=vod-type-id-9-pg-";
                        break;
                    case "剧情片":
                        vm.videoList = vm.getIndexData(vm.resourceStation + "/?m=vod-type-id-10.html");
                        vm.turnPageStr = "/?m=vod-type-id-10-pg-";
                        break;
                    default:
                        break;
                }
            }
        });

        //视频搜索
        $("#search-text").keyup(function(e){
            if(e.keyCode == 13){
                console.log($("#search-text").val());
                var encodeKeywords = encodeURIComponent($("#search-text").val());
                switch (vm.resourceStation) {
                    case "http://zuidazy4.com":
                        vm.videoSearchStr = "http://zuidazy4.com/index.php?m=vod-search&wd="
                        break;
                    case "http://okzyw.com":
                        vm.videoSearchStr = "http://okzyw.com/index.php?m=vod-search&wd="
                        break;
                    case "http://www.123ku.com":
                        vm.videoSearchStr = "http://cj.123ku2.com:12315/index.php?m=vod-search&wd="
                        break;
                    default:
                        break;
                }
                vm.videoList = vm.getIndexData((vm.videoSearchStr + encodeKeywords));
            }
        });


        //初始化tab
        $('.left .ty-svg').tab();

        //播放器页调用详情
        $("#show-detail").click(function () {
            // console.log("执行showDetail():");
            vm.showDetail();
            //切换到详情
            document.getElementById("view").click();
        });


        
    </script>


    <script>
        const axios = require("axios");
        const cheerio = require("cheerio");
        const fs = require("fs");

        //视频收藏vue
        var vueCollect = new Vue({
            el: "#vue-collect",
            data: {
                videoCollect: [],  //视频收藏
            },
            methods:{
                //删除收藏
                deleteCollect(vdo,obj){
                    var txt = (vdo[0]+"#"+vdo[1]+"#"+vdo[2]+"#"+vdo[3]+"\n");
                    console.log("txt为：",txt);
                    var data = fs.readFileSync("collect-list.data","utf-8").toString();
                    data = data.replace(txt,"");
                    fs.writeFileSync("collect-list.data",data,function (err) {
                        if (err) {
                            console.log('删除收藏回写入失败')
                        } else {
                            console.log('删除收藏回写入成功')
                        }
                    });
                    this.videoCollect = [];
                    vm.readCollect();
                },
                //收藏视频详情
                collectDetail(url){
                    vm.getDetailData(url);
                    $("#view").click();
                    vm.isShow = true;
                }
            }
        });


        var vm = new Vue({
            // el: "#video-list",
            el: "#vue-dom",
            data: {
                resourceStation: "http://zuidazy4.com",     //站点地址
                turnPageStr: "/?m=vod-index-pg-",   //默认(首页)翻页字符串
                videoList: [],  //首页视频列表数据
                sumNum: null,   //总条数
                totalPage: 0,    //总页数
                cunrrentPage: 1,    //当前页码
                isShow: false,  //是否显示详情
                videoTitle : null,  //播放的视频的标题
                videoSummary: null, //视频简介
                videoPlayList: [],  //播放地址列表,
                videoSearchStr: "http://zuidazy4.com/index.php?m=vod-search&wd="   //(默认)视频搜索字符串
            },
            created: function () {
                this.videoList = this.getIndexData(this.resourceStation);
                this.readCollect();
            },
            methods: {
                //获取首页数据
                getIndexData(url) {
                    var that = this;
                    var videos = [];
                    axios.get(url).then(resp => {
                        var $ = cheerio.load(resp.data);
                        var list = $("div.xing_vb ul li");

                        for (let i = 1; i < list.length - 1; i++) {
                            var li = $(list[i]);

                            var video = {
                                name: li.find("span.xing_vb4 a").text(),    //视频名称
                                link: (this.resourceStation + li.find("span.xing_vb4 a").attr("href")),  //视频链接
                                type: li.find("span.xing_vb5").text(),    //视频类型
                                updateTime: (li.find("span.xing_vb6").text() == "" ? li.find("span.xing_vb7").text() : li.find("span.xing_vb6").text())
                            };

                            videos.push(video); //添加video对象到列表
                        }

                        var pageInfo = $("div.pages").text();
                        // console.log(pageInfo);
                        var reg = /共(\d+)条数据.*?当前:(\d+)\/(\d+)页/;
                        var page = reg.exec(pageInfo);
                        // console.log(page);
                        that.sumNum = page[1];  //总条数
                        that.cunrrentPage = page[2];    //当前页
                        that.totalPage = page[3];   //总页数
                        console.log("总页数:" + page[3]);
                    });
                    return videos;
                },

                //详情点击事件
                detailClick(DetailUrl){
                    console.log("详情链接被点击:"+DetailUrl);
                    // this.detailUrl = DetailUrl;     //暂存详情页地址
                    this.getDetailData(DetailUrl);

                    this.isShow = true;
                    // console.log(this.isShow)
                },

                //获取详情页数据
                getDetailData(url){
                    var that = this;
                    axios.get(url).then(resp => {
                        var $ = cheerio.load(resp.data,{decodeEntities: false});

                        var title = $("div.vodh h2").text();
                        var summary = $("div.vodBox").html();

                        switch (this.resourceStation) {
                            case "http://zuidazy4.com":    //最大资源网
                                var list = $("div#play_1 li");
                                break;
                            case "http://www.123ku.com":    //123资源站
                                var list = $("div#play_1 li");
                                break;
                            case "http://okzyw.com":    //ok资源网
                                var list = $("div#2 li");
                                break;
                            // case "http://www.subo988.com":    //速播资源站
                            //     var list = $("div#vodplayinfo li");
                            //     break;
                            default:
                                var list = $("div#play_1 li");
                                break;
                        }
                        

                        var playList = [];
                        for (let i = 0; i < list.length; i++) {
                            var a = $(list[i]);
                            var play = {
                                episode : a.text().split("$")[0],
                                address : a.text().split("$")[1]
                            };
                            playList.push(play);
                            
                        }
                        
                        that.videoTitle = title;
                        that.videoSummary = summary;
                        that.videoPlayList = playList;
                        
                    });
                },

                //关闭详情
                detailClose(){
                    this.isShow = false;
                },

                //播放视频
                playVideo(playurl,episode){
                    console.log("播放链接为："+playurl)
                    this.isShow = false;
                    
                    var player = videojs('example-video');
                    player.pause();
                    player.src(playurl);
                    player.play();
                    //设置播放标题
                    document.getElementById("play-tiltle").innerText = ("『"+episode+"』 "+this.videoTitle);
                    //切换到播放器
                    document.getElementById("player").click();
                },
                //向前翻页
                previous(){
                    if (this.cunrrentPage == 1) {
                        return;
                    } else {
                        var i = parseInt(this.cunrrentPage) - 1;
                        var url = (this.resourceStation + vm.turnPageStr + i + '.html');
                        this.videoList = this.getIndexData(url);
                        console.log("上翻页cunrrentPage值："+this.cunrrentPage);
                    }
                },
                //向后翻页
                next(){
                    // console.log(this.totalPage);
                    if (parseInt(this.cunrrentPage) > parseInt(this.totalPage)) {
                        return;
                    } else {
                        var i = parseInt(this.cunrrentPage) + 1;
                        var url = (this.resourceStation + vm.turnPageStr + i + '.html');
                        this.videoList = this.getIndexData(url);
                        console.log("下翻页cunrrentPage值："+this.cunrrentPage);
                    }
                },
                //点击数字翻页
                turnPageGetData(url){
                    this.videoList = this.getIndexData(url);
                    console.log("直接点击页码时cunrrentPage值："+this.cunrrentPage);
                },
                //显示详情
                showDetail(){
                    this.isShow = true;
                },
                //添加收藏
                addCollcet(vdo){
                    var indexOf = vdo.name.indexOf("更新");
                    switch (true) {
                        case indexOf > 0:
                            var name = vdo.name.substring(0,indexOf);
                            break;
                        case indexOf <= 0:
                            var name = vdo.name;
                            break;
                    
                        default:
                            var name = vdo.name;
                            break;
                    }
                    
                    var type = vdo.type;
                    var stantion = $("#station-dropdown-selected").text();
                    var link = vdo.link;
                    var data = (name+"#"+type+"#"+stantion+"#"+link+"\n");
                    fs.appendFileSync("collect-list.data",data,function (err) {
                        if (err) {
                            console.log('写入失败')
                        } else {
                            console.log('写入成功了')
                        }
                    });
                    vueCollect.videoCollect = [];
                    this.readCollect();
                },
                //读取收藏
                readCollect(){
                    console.log("读取收藏文件：");
                    var data = fs.readFileSync("collect-list.data","utf-8").toString();
                    console.log(data);
                    var arr = data.split("\n");
                    for (let i = 0; i < arr.length-1; i++) {
                        var a = arr[i];     //一行
                        var b = a.split("#");   //分割一行
                        vueCollect.videoCollect.push(b);
                    }

                    // console.log("vueCollect.videoCollect为：");
                    // console.log(vueCollect.videoCollect);
                    
                },
            }
        });
    
        
    </script>


    <!-- 视频播放器相关代码 -->
    <script type="text/javascript">
        var player = videojs('example-video', { "poster": "", "controls": "true" }, function () {
            this.on('play', function () {
                $(".vjs-control-bar").css("opacity",0);
                console.log('正在播放');
            });
            //暂停--播放完毕后也会暂停
            this.on('pause', function () {
                $(".vjs-control-bar").css("opacity",1);
                console.log("暂停中")
            });
            // 结束
            this.on('ended', function () {
                console.log('结束');
            })

        });

        
    </script>
</body>

</html>